// 登录弹窗
#login-dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, .3);
  z-index: 3;
  display: none;
  transition: opacity .25s;

  // &.show {
  //   display: block;
  // }

  .login-content {
    height: 100vh;
    padding: 20px;
    padding-top: 100px;
    display: flex;
    overflow: auto;

    .login-form-warp {
      margin: auto;

      .auth-form {
        position: relative;
        width: 320px;
        padding: 24px;
        font-size: 14px;
        background-color: #fff;
        border-radius: 2px;
        // opacity: 0;
        // transform: translate(0, 10%);
        transition: transform .25s, opacity .25s;
        display: none;

        @media screen and (max-width:480px) {
          width: 300px;
        }

        // &.show {
        //   opacity: 1;
        //   transform: translate(0, 0);
        // }

        //关闭按钮
        .close {
          position: absolute;
          top: 19px;
          right: 19px;
          font-size: 14px;
          color: #333;
          opacity: .4;
          padding: 5px;
          cursor: pointer;

          &:hover {
            opacity: .6;
          }

          &:active {
            opacity: .8;
          }
        }

        // 熊猫图
        .panfish-img {
          position: absolute;
          top: 0;
          left: 50%;
          width: 120px;
          display: none;

          &.normal {
            display: block;
            transform: translate(-50%, -83%);
          }

          &.greeting {
            transform: translate(-50%, -75.8%);
          }

          &.blindfold {
            transform: translate(-50%, -75%);
          }
        }

        // 表单内容
        .form-panel {
          .form-title {
            font-size: 18px;
            line-height: 1;
            margin-bottom: 24px;
          }

          .input-group {
            &+.input-group {
              margin-top: 10px;
            }

            input {
              padding: 10px;
              width: 100%;
              border: 1px solid #e9e9e9;
              border-radius: 2px;
              outline: none;
            }

            .btn {
              width: 100%;
              height: 40px;
              padding: 6px 15px;
              color: #fff;
              background-color: rgba(3, 113, 223, .4);
              border-radius: 2px;
              outline: none;
              cursor: pointer;
              margin-top: 5px;
              border: none;
            }
          }

          //用户名-打招呼熊猫
          .username:focus-within {
            input {
              border-color: #007fff;
            }

            .greeting {
              display: block;
            }

            &~.normal {
              display: none;
            }
          }

          //密码-遮住眼睛熊猫
          .password:focus-within {
            input {
              border-color: #007fff;
            }

            .blindfold {
              display: block;
            }

            &~.normal {
              display: none;
            }
          }
        }

        //a元素
        a {
          color: #007fff;
          text-decoration: none;

          &:hover,
          &:active {
            opacity: .7;
          }
        }

        // 快捷链接
        .form-prompt {
          margin-top: 12px;
          color: #767676;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }

        // 协议
        .form-agreement {
          margin-top: 20px;
          color: #767676;
          display: flex;
          align-items: center;
          flex-wrap: wrap;
        }

        //每个表单元素的验证样式
        //失败
        input {
          &[required]:not(:placeholder-shown) {
            border-color: #f73131;
          }
        }

        //成功
        input {
          &[required]:valid {
            border-color: #007fff;
          }
        }

        //整个表单验证通过
        &:valid {
          .input-group .btn {
            background-color: #007fff;
          }
        }

      }
    }
  }
}